<template>
	<view class="articleInfo-wrap">
		<view class="articleInfo-title">{{ articleInfo.title }}</view>
		<u-mp-html containerStyle="height:auto"  :content="articleInfo.content" :editable="false"></u-mp-html>
	</view>
</template>

<script>
import uMpHtml from '@/components/u-mp-html/u-mp-html';
export default {
	components: {
		uMpHtml
	},
	data() {
		return {
			id: null,
			articleInfo: {}
		};
	},
	onLoad(option) {
		this.id = option.id ? option.id : null;

		if (this.id) {
			this.clientQueryArticleDetail();
		}
	},
	onShow() {
		this.clientQueryArticleDetail();
	},
	methods: {
		//查询文章详情
		clientQueryArticleDetail() {
			this.$api
				.clientQueryArticleDetail({
					params: {
						id: this.id
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.articleInfo = res.result;
					}
				});
		}
		
	}
};
</script>

<style lang="less">
.articleInfo-wrap {
	width: 750rpx;
	// padding: 20rpx 32rpx 20rpx;
	box-sizing: border-box;
	overflow: hidden;
	background-color: #fff;
	min-height: 100vh;
	.articleInfo-title {
		font-size: 30rpx;
		font-family: PingFangSC-Medium;
		color: rgba(51, 51, 51, 1);
		font-weight: 600;
		text-align: center;
		background-color: #fff;
		// height: 6vh;
		padding: 30rpx;
	}
	.articleInfo-rich {
		width: 100%;
		// height: 94vh;
	}
}
</style>
